<template>
  <div class="star">
    <hm_header title="我的收藏">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
    </hm_header>
    <van-swipe-cell v-for="(item,index) in starList" :key="item.id">
      <hm_contentblack :post="item"></hm_contentblack>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="unstar(item.id,index)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import hm_header from "@/components/hm_header.vue";
import hm_contentblack from "@/components/hm_contentblack.vue";
import { getStarList } from "@/apis/user.js";
import { postStar } from "@/apis/post.js";
export default {
  components: {
    hm_header,
    hm_contentblack
  },
  data() {
    return {
      starList: []
    };
  },
  async mounted() {
    this.starList = (await getStarList()).data.data;
    console.log(this.starList);
  },
  methods: {
    async unstar(id, index) {
      let res = await postStar(id);
      this.$toast.success(res.data.message);
      this.starList.splice(index, 1);
    }
  }
};
</script>

<style lang="less" scoped>
.delete-button {
  height: 100%;
}
</style>